Frontend Monorepo: Lerna ja Nx-työtilanhallinta

Frontend-kehityksen jatkuvasti kehittyvässä ympäristössä suurten ja monimutkaisten projektien hallinta voi olla merkittävä haaste. Perinteiset usean repositorion kokoonpanot, vaikka ne tarjoavat eristystä, voivat johtaa koodin päällekkäisyyteen, riippuvuuksien hallinnan päänsärkyihin ja epäjohdonmukaisiin työkaluihin. Tässä kohtaa monorepo-arkkitehtuuri loistaa. Monorepo on yksi repositorio, joka sisältää useita projekteja, usein toisiinsa liittyviä, jotka rakennetaan ja versioidaan yhdessä. Tämä lähestymistapa tarjoaa lukuisia etuja, mutta monorepon tehokas hallinta vaatii erikoistyökaluja. Tässä artikkelissa tarkastellaan kahta suosittua ratkaisua: Lernaa ja Nx:ää.

Mikä on Monorepo?

Monorepo on versionhallintajärjestelmän repositorio, joka sisältää koodia monille projekteille. Nämä projektit voivat olla toisiinsa liittyviä tai täysin itsenäisiä. Avainasemassa on se, että ne jakavat saman repositorion. Yritykset, kuten Google, Facebook, Microsoft ja Uber, ovat onnistuneesti ottaneet käyttöön monorepot hallitakseen massiivisia koodikantojaan. Ajattele, että Google tallentaa lähes kaiken koodinsa, mukaan lukien Androidin, Chromen ja Gmailin, yhteen repositorioon.

Monorepon edut

• Koodin jakaminen ja uudelleenkäyttö: Jaa koodia helposti projektien välillä ilman monimutkaisia pakkaus- ja julkaisuprosesseja. Kuvittele design system -kirjasto, joka voidaan saumattomasti integroida useisiin sovelluksiin samassa repositoriossa.
• Yksinkertaistettu riippuvuuksien hallinta: Hallitse riippuvuuksia yhdessä paikassa varmistaen johdonmukaisuuden kaikissa projekteissa. Jaetun kirjaston riippuvuuden päivittäminen päivittää automaattisesti kaikki projektit, jotka ovat siitä riippuvaisia.
• Atomiset muutokset: Tee muutoksia, jotka kattavat useita projekteja yhdessä commitissa, varmistaen johdonmukaisuuden ja yksinkertaistaen testausta. Esimerkiksi sekä frontendiin että backendiin vaikuttava refaktorointi voidaan tehdä atomisesti.
• Parannettu yhteistyö: Tiimit voivat helposti tehdä yhteistyötä eri projekteissa samassa repositoriossa edistäen tiedon jakamista ja monialaista kehitystä. Kehittäjät voivat helposti selata ja ymmärtää koodia eri tiimeissä.
• Johdonmukaiset työkalut ja käytännöt: Varmista johdonmukaiset koodausstandardit, linting-säännöt ja koontiprosessit kaikissa projekteissa. Tämä parantaa koodin laatua ja ylläpidettävyyttä.
• Yksinkertaistettu refaktorointi: Laajamittaiset refaktorointiprojektit yksinkertaistuvat, kun kaikki asiaan liittyvä koodi on samassa repositoriossa. Automatisoituja refaktorointityökaluja voidaan käyttää koko koodikannan laajuudelta.

Monorepon haasteet

• Repositorion koko: Monorepot voivat kasvaa hyvin suuriksi, mikä saattaa hidastaa kloonaus- ja indeksointitoimintoja. Työkalut, kuten git sparse-checkout ja partial clone, voivat auttaa lieventämään tätä ongelmaa.
• Koontiajät: Koko monorepon rakentaminen voi olla aikaa vievää, erityisesti suurissa projekteissa. Työkalut, kuten Lerna ja Nx, tarjoavat optimoituja koontiprosesseja tämän ratkaisemiseksi.
• Pääsynhallinta: Pääsyn rajoittaminen monorepon tiettyihin osiin voi olla monimutkaista. Huolellinen suunnittelu ja pääsynhallintamekanismien toteuttaminen ovat välttämättömiä.
• Työkalujen monimutkaisuus: Monorepon asettaminen ja hallinta vaatii erikoistuneita työkaluja ja tietoja. Oppimiskäyrä voi olla aluksi jyrkkä.

Lerna: JavaScript-projektien hallinta Monorepossa

Lerna on suosittu työkalu JavaScript-projektien hallintaan monorepossa. Se optimoi työnkulun Gitin ja npmin avulla useiden pakettien repositorioiden hallinnassa. Se sopii erityisen hyvin projekteille, jotka käyttävät npm:ää tai Yarnia riippuvuuksien hallintaan.

Lernan tärkeimmät ominaisuudet

• Versionhallinta: Lerna voi automaattisesti versioida ja julkaista paketteja edellisen julkaisun jälkeen tehtyjen muutosten perusteella. Se käyttää tavanomaisia committeja seuraavan versionumeron määrittämiseen.
• Riippuvuuksien hallinta: Lerna hallitsee pakettien välisiä riippuvuuksia varmistaen, että monorepon paketit voivat olla riippuvaisia toisistaan. Se käyttää symlinkejä paikallisten riippuvuuksien luomiseen.
• Tehtävien suoritus: Lerna voi suorittaa komentoja useissa paketeissa rinnakkain nopeuttaen koonti- ja testausprosesseja. Se tukee package.json-tiedostossa määritettyjen skriptien suorittamista.
• Muutosten havaitseminen: Lerna voi havaita, mitkä paketit ovat muuttuneet edellisen julkaisun jälkeen, mikä mahdollistaa kohdennetut koontiversiot ja käyttöönotot.

Lernan käyttöesimerkki

Havainnollistetaan Lernan käyttöä yksinkertaistetulla esimerkillä. Oletetaan, että meillä on monorepo, jossa on kaksi pakettia: package-a ja package-b. package-b on riippuvainen package-a:sta.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Alusta Lerna:

lerna init

Tämä luo tiedoston lerna.json ja päivittää juuritiedoston package.json. Tiedosto lerna.json määrittää Lernan toiminnan.

2. Asenna riippuvuudet:

npm install
# or
yarn install

Tämä asentaa riippuvuudet kaikille monorepon paketeille, jotka perustuvat kunkin paketin package.json -tiedostoihin.

3. Suorita komento pakettien välillä:

lerna run test

Tämä suorittaa test-skriptin, joka on määritetty kaikkien niiden pakettien package.json-tiedostoissa, joissa se on määritetty.

4. Julkaise paketit:

lerna publish

Tämä komento analysoi commit-historian, määrittää, mitkä paketit ovat muuttuneet, korottaa niiden versioita tavanomaisten commitien perusteella ja julkaisee ne npm:ään (tai valitsemaasi rekisteriin).

Lernan konfigurointi

Tiedosto lerna.json on Lernan konfiguroinnin ydin. Sen avulla voit mukauttaa Lernan toimintaa, kuten:

• packages: Määrittää pakettien sijainnin monorepossa. Usein asetettu arvoon ["packages/*"].
• version: Määrittää versiointistrategian. Voi olla independent (jokaisella paketilla on oma versionsa) tai kiinteä versio.
• command: Mahdollistaa tiettyjen Lerna-komentojen, kuten publish ja run, asetusten määrittämisen.

Esimerkki lerna.json:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Älykäs, nopea ja laajennettava koontijärjestelmä

Nx on tehokas koontijärjestelmä, joka tarjoaa edistyksellisiä ominaisuuksia monorepon hallintaan. Se keskittyy inkrementaalisiin koontiversioihin, laskentavälimuistiin ja tehtävien orkestrointiin, mikä parantaa merkittävästi koontiaikoja ja kehittäjän tuottavuutta. Vaikka Lerna keskittyy ensisijaisesti pakettien hallintaan, Nx tarjoaa kattavamman lähestymistavan koko monorepon työnkulun hallintaan, mukaan lukien koodin luominen, linting, testaus ja käyttöönotto.

Nx:n tärkeimmät ominaisuudet

• Inkrementaaliset koontiversiot: Nx analysoi projektiesi riippuvuuskaavion ja rakentaa uudelleen vain ne projektit, jotka ovat muuttuneet edellisen koontiversion jälkeen. Tämä lyhentää dramaattisesti koontiaikoja.
• Laskentavälimuisti: Nx tallentaa tehtävien, kuten koontiversioiden ja testien, tulokset välimuistiin, jotta niitä voidaan käyttää uudelleen, jos syötteet eivät ole muuttuneet. Tämä nopeuttaa entisestään kehityssyklejä.
• Tehtävien orkestrointi: Nx tarjoaa tehokkaan tehtävien orkestrointijärjestelmän, jonka avulla voit määrittää monimutkaisia koontiputkia ja suorittaa ne tehokkaasti.
• Koodin luominen: Nx tarjoaa koodin luontityökaluja, jotka voivat auttaa sinua luomaan nopeasti uusia projekteja, komponentteja ja moduuleja noudattaen parhaita käytäntöjä ja johdonmukaisia standardeja.
• Lisäosien ekosysteemi: Nx:llä on runsas lisäosien ekosysteemi, joka tukee erilaisia teknologioita ja kehyksiä, kuten React, Angular, Node.js, NestJS ja muita.
• Riippuvuuskaavion visualisointi: Nx voi visualisoida monoreposi riippuvuuskaavion, mikä auttaa sinua ymmärtämään projektien välisiä suhteita ja tunnistamaan mahdollisia ongelmia.
• Vaikuttavat komennot: Nx tarjoaa komentoja, joilla tehtäviä voidaan suorittaa vain niissä projekteissa, joihin tietty muutos vaikuttaa. Näin voit keskittää ponnistelusi niihin alueisiin, jotka tarvitsevat huomiota.

Nx:n käyttöesimerkki

Havainnollistetaan Nx:n käyttöä yksinkertaistetulla esimerkillä. Luomme monorepon React-sovelluksella ja Node.js-kirjastolla.

1. Asenna Nx CLI globaalisti:

npm install -g create-nx-workspace

2. Luo uusi Nx-työtila:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Tämä luo uuden Nx-työtilan React-sovelluksella. Valinta --preset=react kertoo Nx:lle, että työtila on alustettava React-kohtaisilla määrityksillä.

3. Luo kirjasto:

nx generate @nrwl/node:library my-library

Tämä luo uuden Node.js-kirjaston nimeltä my-library. Nx määrittää kirjaston ja sen riippuvuudet automaattisesti.

4. Rakenna sovellus:

nx build my-app

Tämä rakentaa React-sovelluksen. Nx analysoi riippuvuuskaavion ja rakentaa uudelleen vain tarvittavat tiedostot.

5. Suorita testit:

nx test my-app

Tämä suorittaa React-sovelluksen yksikkötestit. Nx tallentaa testitulokset välimuistiin nopeuttaakseen myöhempiä testiajokertoja.

6. Tarkastele riippuvuuskaaviota:

nx graph

Tämä avaa verkkokäyttöliittymän, joka visualisoi monorepon riippuvuuskaavion.

Nx:n konfigurointi

Nx:n konfigurointi tapahtuu tiedostossa nx.json, joka sijaitsee työtilan juuressa. Tämä tiedosto määrittää työtilan projektit, niiden riippuvuudet ja tehtävät, jotka niissä voidaan suorittaa.

Tärkeimmät määritysasetukset tiedostossa nx.json ovat:

• projects: Määrittää työtilan projektit ja niiden määritykset, kuten niiden juurihakemiston ja koontikohteet.
• tasksRunnerOptions: Määrittää tehtävien suorittimen, joka vastaa tehtävien suorittamisesta ja niiden tulosten tallentamisesta välimuistiin.
• affected: Määrittää, miten Nx määrittää, mitkä projektit ovat muutoksen kohteena.

Esimerkki nx.json:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx: Kumpi valita?

Sekä Lerna että Nx ovat erinomaisia työkaluja frontend-monorepoiden hallintaan, mutta ne palvelevat hieman erilaisia tarpeita. Tässä on vertailu, joka auttaa sinua valitsemaan oikean projektillesi:

Ominaisuus	Lerna	Nx
Painopiste	Pakettien hallinta	Koontijärjestelmä ja tehtävien orkestrointi
Inkrementaaliset koontiversiot	Rajoitettu (vaatii ulkoisia työkaluja)	Sisäänrakennettu ja erittäin optimoitu
Laskentavälimuisti	Ei	Kyllä
Koodin luominen	Ei	Kyllä
Lisäosien ekosysteemi	Rajoitettu	Laaja
Oppimiskäyrä	Pienempi	Suurempi
Monimutkaisuus	Yksinkertaisempi	Monimutkaisempi
Käyttötapaukset	Projektit, jotka keskittyvät ensisijaisesti npm-pakettien hallintaan ja julkaisuun.	Suuret ja monimutkaiset projektit, jotka vaativat optimoituja koontiaikoja, koodin luomista ja kattavan koontijärjestelmän.

Valitse Lerna, jos:

• Sinun on ensisijaisesti hallittava ja julkaistava npm-paketteja.
• Projektisi on suhteellisen pieni tai keskikokoinen.
• Pidät yksinkertaisemmasta työkalusta, jolla on matalampi oppimiskäyrä.
• Olet jo perehtynyt npmiin ja Yarniin.

Valitse Nx, jos:

• Tarvitset optimoituja koontiaikoja ja inkrementaalisia koontiversioita.
• Haluat koodin luontiominaisuudet.
• Tarvitset kattavan koontijärjestelmän, jossa on tehtävien orkestrointi.
• Projektisi on suuri ja monimutkainen.
• Olet valmis panostamaan aikaa tehokkaamman työkalun oppimiseen.

Voitko käyttää Lernaa Nx:n kanssa?

Kyllä, Lernaa ja Nx:ää voidaan käyttää yhdessä. Tämä yhdistelmä antaa sinun hyödyntää Lernan pakettienhallintaominaisuuksia ja samalla hyötyä Nx:n optimoidusta koontijärjestelmästä ja tehtävien orkestroinnista. Nx voidaan määrittää Lernan tehtävien suorittajaksi, mikä tarjoaa inkrementaalisia koontiversioita ja laskentavälimuistia Lernan hallitsemille paketeille.

Parhaat käytännöt Frontend Monorepon hallintaan

Riippumatta siitä, valitsetko Lernan vai Nx:n, parhaiden käytäntöjen noudattaminen on ratkaisevan tärkeää frontend-monorepon onnistuneelle hallinnalle:

• Luo selkeä projektirakenne: Järjestä projektisi loogisesti ja johdonmukaisesti. Käytä selkeää nimeämiskäytäntöä paketeille ja kirjastoille.
• Noudata johdonmukaisia koodausstandardeja: Käytä lintersiä ja muotoilijoita varmistaaksesi johdonmukaisen koodityylin kaikissa projekteissa. Työkalut, kuten ESLint ja Prettier, voidaan integroida työnkulkuusi.
• Automatisoi koonti- ja testausprosessit: Käytä CI/CD-putkia automatisoidaksesi koonti-, testaus- ja käyttöönotto-prosessit. Työkaluja, kuten Jenkins, CircleCI ja GitHub Actions, voidaan käyttää.
• Ota käyttöön koodikatselmukset: Suorita perusteellisia koodikatselmuksia varmistaaksesi koodin laadun ja ylläpidettävyyden. Käytä vetopyyntöjä ja koodikatselmustyökaluja.
• Seuraa koontiaikoja ja suorituskykyä: Seuraa koontiaikoja ja suorituskykymittareita tunnistaaksesi pullonkaulat ja kehityskohteet. Nx tarjoaa työkaluja koontisuorituskyvyn analysointiin.
• Dokumentoi Monorepon rakenne ja prosessit: Luo selkeä dokumentaatio, joka selittää monoreposi rakenteen, käytetyt työkalut ja teknologiat sekä kehityksen työnkulut.
• Ota käyttöön tavanomaiset commitit: Käytä tavanomaisia committeja automatisoidaksesi versiointi- ja julkaisuprosesseja. Lerna tukee tavanomaisia committeja heti laatikosta.

Johtopäätös

Frontend-monorepot tarjoavat merkittäviä etuja suurten ja monimutkaisten projektien hallintaan, mukaan lukien koodin jakaminen, yksinkertaistettu riippuvuuksien hallinta ja parannettu yhteistyö. Lerna ja Nx ovat tehokkaita työkaluja, jotka voivat auttaa sinua hallitsemaan tehokkaasti frontend-monorepoa. Lerna on loistava valinta npm-pakettien hallintaan, kun taas Nx tarjoaa kattavamman koontijärjestelmän, jossa on edistyksellisiä ominaisuuksia, kuten inkrementaaliset koontiversiot ja koodin luominen. Harkitsemalla huolellisesti projektisi tarpeita ja noudattamalla parhaita käytäntöjä voit onnistuneesti ottaa käyttöön frontend-monorepon ja niittää sen edut.

Muista ottaa huomioon tekijöitä, kuten tiimisi kokemus, projektin monimutkaisuus ja suorituskykyvaatimukset, kun valitset Lernan ja Nx:n välillä. Kokeile molempia työkaluja ja löydä se, joka sopii parhaiten juuri sinun tarpeisiisi.

Onnea monorepomatkallesi!